/**
 * Created with IntelliJ IDEA.
 * User: zet
 * Date: 13-2-6
 * Time: 上午11:01
 * To change this template use File | Settings | File Templates.
 */

(function(){
    window.$name = function(name, parent){
        if(!parent){
            parent = document.body || document;
        }

        var i, children = parent.childNodes, result = null;
        for(i = 0; i < children.length; i ++){
            if (children[i].nodeType === 1 && children[i].getAttribute('name') === name){
                return children[i];
            }
            result = arguments.callee.call(null, name, children[i]);
            if(result){
                return result;
            }
        }
    };

    window.SilverBox = window.SilverBox || {};

    var SilverBox = window.SilverBox,
        core_rspace = /\s+/,
        rclass = /[\t\r\n]/g;

    SilverBox.hasClass = function(el, classStr){

        if(!el || !classStr){
            return false;
        }

        var className = " " + classStr + " ";
        if ( el.nodeType === 1 && (" " + el.className + " ").replace(rclass, " ").indexOf( className ) >= 0 ) {
            return true;
        }

        return false;
    }

    SilverBox.addClass = function(el, classStr){
        if(!el || !classStr){
            return;
        }

        var classNames, setClass, c, cl;

        if ( classStr && typeof classStr === "string" ) {
            classNames = classStr.split( core_rspace );

            if ( el.nodeType === 1 ) {
                if ( !el.className && classNames.length === 1 ) {
                    el.className = classStr;

                } else {
                    setClass = " " + el.className + " ";

                    for ( c = 0, cl = classNames.length; c < cl; c++ ) {
                        if ( setClass.indexOf( " " + classNames[ c ] + " " ) < 0 ) {
                            setClass += classNames[ c ] + " ";
                        }
                    }
                    el.className = setClass.trim();
                }
            }

        }

        return this;
    };

    SilverBox.removeClass = function(el, classStr){

        if(!el || !classStr){
            return;
        }

        var removes, className, c, cl;

        if ( (classStr && typeof classStr === "string") || classStr === undefined ) {
            removes = ( classStr || "" ).split( core_rspace );

            if ( el.nodeType === 1 && el.className ) {

                className = (" " + el.className + " ").replace( rclass, " " );

                // loop over each item in the removal list
                for ( c = 0, cl = removes.length; c < cl; c++ ) {
                    // Remove until there is nothing to remove,
                    while ( className.indexOf(" " + removes[ c ] + " ") >= 0 ) {
                        className = className.replace( " " + removes[ c ] + " " , " " );
                    }
                }
                el.className = className.trim();
            }
        }
    };

    SilverBox.toggleClass = function(el, classStr){
        if(!el || !classStr){
            return;
        }
        if(classStr.split(' ').length != 1){
            return;
        }
        if(this.hasClass(el, classStr)){
            this.removeClass(el, classStr);
        }
        else{
            this.addClass(el, classStr);
        }
    };

    var flip = function(el, options){
        el = typeof el === 'string' ? document.getElementById(el) : el;
        el.style['position'] = 'relative';
        var that = this;
        this.cover = $name('flip-cover', el);
        this.coverImg = $name('flip-cover-img', that.cover);
        this.card = $name('flip-card', el);
        this.cardFrontImg = $name('flip-front-img', that.card);
        this.cardBackImg = $name('flip-back-img', that.card);
        this.options = {
            autoFlip: false,
            flipTime: 5,
            currentPage: 0,
            imgs: []
        }

        for(var key in options){
            this.options[key] = options[key];
        }

        this.init();
    };

    flip.prototype = {
        handleEvent: function (e) {
            var that = this;
            switch(e.type){
                case 'webkitAnimationEnd':
                    that._flipEnd(e);
                    break;
                case 'animationend':
                    that._flipEnd(e);
                    break;
                case 'oAnimationEnd':
                    that._flipEnd(e);
                    break;
                case 'MSAnimationEnd':
                    that._flipEnd(e);
                    break;
                default:
                    break;
            }
        },
        init: function(){
            var that = this;
            that.currentPage = that.options.currentPage;
            that.length = that.options.imgs.length;

            if(this.length <= 0){
                return;
            }
            that.coverImg.src = that.options.imgs[that.currentPage];
            that.setInterval();

        },
        _bind: function(){
            var that = this;
            that.card.addEventListener('webkitAnimationEnd', that, false);
            that.card.addEventListener('animationend', that, false);
            that.card.addEventListener('oAnimationEnd', that, false);
            that.card.addEventListener('MSAnimationEnd', that, false);
        },
        _unbind: function(){
            var that = this;
            that.card.removeEventListener('webkitAnimationEnd', that, false);
            that.card.removeEventListener('animationend', that, false);
            that.card.removeEventListener('oAnimationEnd', that, false);
            that.card.removeEventListener('MSAnimationEnd', that, false);
        },
        next: function(){
            if(this.flipping || (this.length <= 0)){
                return;
            }
            this._bind();
            this.flipping = true;
            this.cardFrontImg.src = this.coverImg.src;
            this.currentPage = (this.currentPage + 1) >= this.length ? 0 : (this.currentPage + 1);
            this.cardBackImg.src = this.options.imgs[this.currentPage];
            SilverBox.addClass(this.card, 'block');
            SilverBox.addClass(this.cover, 'hide');
            SilverBox.addClass(this.card, 'flip-animation');
            this.coverImg.src = this.options.imgs[this.currentPage];
        },
        _flipEnd: function(e){
            var that = this;
            SilverBox.removeClass(that.cover, 'hide');
            SilverBox.removeClass(that.card, 'block flip-animation');
            that.flipping = false;
            that._unbind();
        },
        setInterval: function(){
            var that = this;
            if(that.options.autoFlip){
                that.interval = setInterval(function(){
                    that.next();
                }, that.options.flipTime * 1000);
            }
        },
        destroyInterval: function(){
            var that = this;
            if(that.interval){
                clearInterval(that.interval);
                that.interval = null;
            }
        },
        destroy: function(){
            var that = this;
            that.destroyInterval();
            that._unbind();

            that.cover = null;
            that.coverImg = null;
            that.card = null;
            that.cardFrontImg = null;
            that.cardBackImg = null;
            that.options = null;

            that.currentPage = null;
            that.length = null;
        }
    }

    window.flip = flip;
})();
